<template>
  <div class="base">
    <canvas id="webgl"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import utils from "@/utils";

import Experience from './class/Experience'

const experience = ref()
onMounted(() => {
  // 特别说明 窗口尺寸改变的时候Webgl元素的长宽不会变化
  // 渲染的尺寸应该根据.base 这个元素的长宽而变化
  const outBox= document.querySelector('.base');
  const canvas = document.querySelector('#webgl')
  experience.value = new Experience(canvas, outBox)
  console.log(1);
});
onUnmounted(()=>{
  experience.value.destroy()
})
</script>
<style lang="scss" scoped>
.base {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  #webgl {
    width: 100%;
    height: 100%;
  }
}
</style>